<template>
    <div class="main">
        <h2>标题</h2>
        <div class="show">
            <slot name="s1">默认内容1</slot>
            <br>
            <slot name="s2">默认内容2</slot>
            <br>
            <slot :Game="games">默认内容3</slot>
        </div>
    </div>
</template>
<script setup lang="ts" name="Slot">
import emitter from '@/tools/emitter';
import { onMounted, reactive } from 'vue';
    defineProps(['Sendgames']);
    const emit=defineEmits(['SendGames']);
    let games=reactive([
        {id:"01",name: "LOL"},
        {id: "02", name: "原神"},
        {id: "03",name: "王者"},
        {id: "04" , name: "地平线"},
    ])
    onMounted(()=>{
       emit("SendGames",games);
    })
    defineExpose({games});
</script>
<style scoped>
    h2{
        background-color: orange;
    }
    .main{
        background-color: skyblue;
        border-radius: 10px;
        border: 1px solid black;
    }
</style>